<template>
  <a-card :style="{ boxShadow: 'none' }" :bordered="false" :bodyStyle="{ padding: '0' }">
    <a-table
      @change="pageChange"
      table-layout="fixed"
      sticky
      :row-selection="{
        selectedRowKeys: userTable.keys,
        onChange: (k: any[]) => (userTable.keys = k),
      }"
      bordered
      :loading="userTable.loading"
      :pagination="false"
      :customRow="customRow"
      :rowKey="userTable.rowKey"
      :columns="formatColumns(userColumns)"
      :data-source="userTable.data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-dropdown-button
            trigger="click"
            @click="userEdit(record.userId)"
            @open-change="openChange(record as UserProfileData)"
          >
            <EditOutlined />
            <template #overlay>
              <a-menu :items="userTable.contextmenu"></a-menu>
            </template>
          </a-dropdown-button>
        </template>
        <template v-if="column.key === 'avatar'">
          <a-avatar :src="getImageByFullPath(record.avatar)"></a-avatar>
        </template>
      </template>
    </a-table>
    <ChangePassword />
  </a-card>
</template>

<script setup lang="ts">
import type { UserProfileData } from '@/api/modules/system/user/types';
import { getImageByFullPath } from '@/api/utils/image';
import { formatColumns } from '@/utils/table/table';
import { useArrayFilter, useCloned } from '@vueuse/core';
import type { TablePaginationConfig } from 'ant-design-vue';
import type { FilterValue, SorterResult } from 'ant-design-vue/es/table/interface';
import { userColumns } from '../../data/column';
import { displayUserMenu, userEdit, userList } from '../../data/curd';
import { userForm } from '../../data/form';
import { userTable } from '../../data/table';
import ChangePassword from '../components/change-password/ChangePassword.vue';

const openChange = (record: UserProfileData) => {
  userForm.value = useCloned(record).cloned.value;
};

/* 行事件 */
const customRow = (record: UserProfileData) => {
  return {
    onClick() {
      const id = (record as any)[userTable.value.rowKey];
      userForm.value = record;
      if (!userTable.value.keys.includes(id)) {
        userTable.value.keys.push(id);
      } else {
        userTable.value.keys = useArrayFilter(userTable.value.keys, e => e !== id).value;
      }
      userTable.value.keys = [record.userId!];
    },
    onDblclick() {
      userEdit(record.userId);
    },
    onContextmenu() {
      userForm.value = record;
      displayUserMenu(record);
    },
  };
};

/* 分页事件触发 */
const pageChange = (
  pagination: TablePaginationConfig,
  filters: Record<string, FilterValue>,
  sorter: SorterResult<UserProfileData> | SorterResult<UserProfileData>[],
) => {
  if (pagination.current && pagination.pageSize) {
    userTable.value.query.pageNum = pagination.current;
    userTable.value.query.pageSize = pagination.pageSize;
  }
  userList();
};
</script>

<style lang="scss" scoped></style>
